<template>
  <div class="背景">
    <!--页眉-->
    <div class="页眉">
      <el-row :gutter="16" type="flex" justify="center">
        <el-col :span="8">
          <div class="文本-主标题">富吾号 - 创作服务平台</div>
        </el-col>
        <el-col :span="10">
          <el-dropdown style="float: right; padding: 3px 0;margin-top: 10px; margin-left: 20px;" trigger="click">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" @click="goBack">返回主页</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" @click="logout">退出登录</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span style="float: right; margin-top: 2px;">
              <el-avatar :size="40" :src=useravatar></el-avatar>
          </span>



        </el-col>
      </el-row>
    </div>
    <!--分栏-->
    <el-row :gutter="16" type="flex" justify="center">
      <!--菜单栏-->
      <el-col :span="4">
        <div class="文本框" style="height: 900px;">
          <el-menu  router>
            <el-menu-item index="/CreationCenter" >
              <div class="文本">
                <i class="el-icon-menu"></i>
                首页
              </div>
            </el-menu-item>
            <el-submenu index="001">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-edit-outline"></i>
                  创作
                </div>
              </template>
              <el-menu-item index="/CreationCenter/SendArticle">发布文章</el-menu-item>
              <el-menu-item index="/CreationCenter/SendVideo">发布视频</el-menu-item>
              <el-menu-item index="/CreationCenter/SendReport">发布研报</el-menu-item>
              <el-menu-item index="/CreationCenter/SendTinyArticle">发布富微条</el-menu-item>
              <el-menu-item index="/CreationCenter/SendNews">发布资讯</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/ManageArticle">
              <div class="文本">
                <i class="el-icon-reading"></i>
                作品管理
              </div>
            </el-menu-item>
            <el-submenu index="002">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-view"></i>
                  互动管理
                </div>
              </template>
              <el-menu-item index="/CreationCenter/ManageFollow">关注管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManageComment">评论管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManagePM">私信管理</el-menu-item>
            </el-submenu>
            <el-submenu index="003">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-document"></i>
                  数据分析
                </div>
              </template>
              <el-menu-item index="/CreationCenter/DataArticle">作品数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataFans">粉丝数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataProfit">收益数据</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/Option">
              <div class="文本">
                <i class="el-icon-setting"></i>
                设置
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <!--正文栏-->
      <el-col :span="14">
        <!--个人数据-->
        <div class="文本框">
          <el-row>
            <el-col :span="3"><el-avatar :size="100" :src=useravatar></el-avatar></el-col>
            <el-col :span="21">
              <div class="文本-标题">{{nickname}} </div>
              <div class="文本-小-宽间距">{{ userarticleandfuheadlinenumbers }} 文章 {{ uservideonumbers }} 视频</div>
              <div class="文本-小-宽间距">{{ userthumbups }} 获赞 {{ userfollows }} 关注 {{ userfollowers }} 粉丝</div>
              <div class="文本-小-宽间距">身份认证：{{authorityinformation}}</div>
              <div class="文本-小-宽间距">{{shortIntroduce}}</div>
            </el-col>
          </el-row>
        </div>
        <!--公告-->
        <div class="文本框" style="height: 100px;">
          <div class="文本-标题 居中">
            公告
          </div>
          <div class="文本">
            这是公告，这是公告，这是公告。
          </div>
          <el-button type="text" @click="dialogVisible = true" style="padding: 0px;">123</el-button>
        </div>
        <el-row :gutter="16" type="flex" justify="center">
          <!--数据总览-->
          <el-col :span="15">
            <div class="文本框-无间距" style="height: 300px;">
              <el-row>
                <el-col :span="16">
                  <div class="文本-标题">
                    数据总览
                  </div>
                </el-col>
                <el-col :span="8">
                  <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                </el-col>
              </el-row>
              <el-tabs v-model="defaultActivePage_1">
                <el-tab-pane label="人气数据" name="001">
                  <el-row :gutter="8" type="flex" justify="center">
                    <el-col span="8">
                      <div class="卡片">
                        <div class="文本-小">
                          新增粉丝数
                        </div>
                        <div class="文本-标题">
                          0
                        </div>
                      </div>
                      <div class="卡片">
                        <div class="文本-小">
                          点赞数
                        </div>
                        <div class="文本-标题">
                          0
                        </div>
                      </div>
                    </el-col>
                    <el-col span="8">
                      <div class="卡片">
                        <div class="文本-小">
                          赞赏数
                        </div>
                        <div class="文本-标题">
                          0
                        </div>
                      </div>
                      <div class="卡片">
                        <div class="文本-小">
                          主页访问数
                        </div>
                        <div class="文本-标题">
                          0
                        </div>
                      </div>
                    </el-col>
                    <el-col span="8">
                      <div class="卡片">
                        <div class="文本-小">
                          播放总量
                        </div>
                        <div class="文本-标题">
                          0
                        </div>
                      </div>
                      <div class="卡片">
                        <div class="文本-小">
                          播放总量
                        </div>
                        <div class="文本-标题">
                          0
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="视频数据" name="002">
                </el-tab-pane>
                <el-tab-pane label="富头条数据" name="003">
                </el-tab-pane>
                <el-tab-pane label="直播数据" name="004">
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
          <!--创作榜-->
          <el-col :span="9">
            <div class="文本框-无间距" style="height: 300px;">
              <el-row>
                <el-col :span="16">
                  <div class="文本-标题">
                    创作榜
                  </div>
                </el-col>
                <el-col :span="8">
                  <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                </el-col>
              </el-row>
              <el-tabs v-model="defaultActivePage_2">
                <el-tab-pane label="名家榜" name="001">
                  <div v-for="o in 5" :key="o" style="padding-top: 6px;padding-bottom: 6px;">
                    <el-row>
                      <el-col :span="2">
                        <div class="文本-中">
                          {{ o }}
                        </div>
                      </el-col>

                      <el-col :span="3">
                        <div class="block"><el-avatar shape="square" :size="25" :src="squareUrl"></el-avatar></div>
                      </el-col>

                      <el-col :span="11">
                        <div class="文本-中">
                          {{ tableData[o-1].name }}
                        </div>

                      </el-col>

                      <el-col :span="8">
                        <div class="文本-中" style="text-align: right;">
                          {{ tableData[o-1].hot }}
                        </div>

                      </el-col>
                    </el-row>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="首席榜" name="002">
                </el-tab-pane>
                <el-tab-pane label="菁英榜" name="003">
                </el-tab-pane>
              </el-tabs>

            </div>
          </el-col>
        </el-row>
        <!--作品榜-->
        <div class="文本框">
          <el-row>
            <el-col :span="16">
              <div class="文本-大">
                作品榜
              </div>
            </el-col>
            <el-col :span="8">
              <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
            </el-col>
          </el-row>
          <el-tabs v-model="defaultActivePage_3">
            <el-tab-pane label="热点榜" name="001">
              <div v-for="o in 5" :key="o" style="padding-top: 4px;padding-bottom: 4px;">
                <el-row>
                  <el-col :span="1">
                    <div class="文本">
                      {{ o + '.'}}
                    </div>
                  </el-col>

                  <el-col :span="15">
                    <div class="文本">
                      {{ tableData[o-1].name }}
                    </div>

                  </el-col>

                  <el-col :span="8">
                    <div class="文本" style="text-align: right;">
                      {{ tableData[o-1].hot }}
                    </div>

                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane label="热门视频" name="002">
            </el-tab-pane>
            <el-tab-pane label="热门文章" name="003">
            </el-tab-pane>
            <el-tab-pane label="热门研报" name="004">
            </el-tab-pane>
            <el-tab-pane label="热门富微条" name="005">
            </el-tab-pane>
          </el-tabs>

        </div>
      </el-col>
    </el-row>
    <!--页脚-->
    <div class="页眉">
    </div>

    <el-dialog
        title="确认支付"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
      <div class="文本-中">
        购买内容
      </div>
      <br/>
      <el-row>
        <el-col :span="6">
          图片
        </el-col>
        <el-col :span="18">
          名称
        </el-col>
      </el-row>
      <br/>
      <div class="文本-中">
        支付方式
      </div>
      <br/>
      <el-tabs :tab-position="tabPosition" type="border-card" style="height: 280px;">
        <el-tab-pane label="支付宝">
          <br/>
          <div class="文本 居中"><el-avatar shape="square" :size="120"></el-avatar></div>
          <br/>
          <div class="居中">
            <span class="文本 居中">支付金额：</span>
            <span class="文本-巨型 居中"> 15 </span>
            <span class="文本 居中"> 元 </span>
          </div>

        </el-tab-pane>
      </el-tabs>
    </el-dialog>




  </div>
</template>

<!--全局样式，在所有vue中可见-->
<style>
/*菜单栏*/
.el-menu {
  border-right:0!important;
}
.el-menu {
  margin: 2px;
}


.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}


.标题 {
  font-size: 24px;
  text-align: center;
  color: red;
  margin-bottom: 8px;
  margin-top: 8px;
  font-weight: bold;
}

.小标题 {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
}

.加粗 {
  font-weight: bold;
}

.背景 {
  background: #f8f7f7;
}

.页眉{
  height: 50px;
  background: #ffffff;
}

.文本框 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}

.文本框-灰色 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}

.文本框-灰色-无间距 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}

.文本框-无间距 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}

.文本-小 {
  font-size: 12px;
  text-align: left;
}

.文本-小-宽间距 {
  font-size: 12px;
  text-align: left;
  margin-bottom: 5px;
}

.文本 {
  font-size: 14px;
  text-align: left;
}

.文本-中 {
  font-size: 16px;
  text-align: left;
}

.文本-大 {
  font-size: 18px;
  text-align: left;
}

.文本-标题 {
  font-size: 20px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}

.文本-主标题 {
  font-size: 22px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}

.文本-巨型 {
  font-size: 26px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}

.居中{
  text-align: center;
}

.右侧{
  text-align: right;
}

.卡片 {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 8px;
}

.body {
  background: #f8f7f7;
}
.text {
  font-size: 14px;
  text-align: left;
}
.grid-content {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}
.grid-content-2 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
}
.grid-content-carousel {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
}
.text-card {
  font-size: 12px;
  text-align: left;
}
.text-card-big {
  font-size: 20px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}
.grid-content-card {
  background: #f8f7f7;
  border-radius: 8px;
  min-height: 36px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 8px;
}

</style>

<script>
export default {
  data() {
    return {
      queryByUserId:{
        idUser: window.sessionStorage.getItem("idUser")
      },
      idUser:"",
      nickname:"",
      authorityinformation:"",
      useravatar:"",
      userarticleandfuheadlinenumbers:"",
      uservideonumbers:"",
      userthumbups:"",
      userfollows:"",
      userfollowers:"",

      tabPosition: 'left',
      dialogVisible: false,
      /*数据总览默认显示页*/
      defaultActivePage_1: '001',
      /*创作榜默认显示页*/
      defaultActivePage_2: '001',
      /*作品榜默认显示页*/
      defaultActivePage_3: '001',
      /*创作榜表格*/
      tableData: [
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'}
      ],
    }
  },
  created() {
    this.getUserBasicInfoById()
  },
  methods: {
    goBack() {
      this.$router.push('/');
    },
    logout() {
      window.sessionStorage.removeItem('idUser');
      this.$router.push('/Login');
    },
    async getUserBasicInfoById() {
      const {data: res} = await this.$http.get('http://39.102.76.217:8082/getuserbasicinfobyid', {
        params:this.queryByUserId
      })
      this.idUser=res.idUser
      this.nickname=res.nickname
      this.authorityinformation=(res.authorityinformation == '')? '暂无' : res.authorityinformation
      this.useravatar=res.useravatar
      this.userarticleandfuheadlinenumbers=res.userarticleandfuheadlinenumbers
      this.uservideonumbers=res.uservideonumbers
      this.userthumbups=res.userthumbups
      this.userfollows=res.userfollows
      this.userfollowers=res.userfollowers
      console.log(res)
    },
  }
};
</script>
